import '../src/styles/index.scss';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import React from 'react';
const styles: React.CSSProperties = {
  padding: '20px 40px',
};
const Red = props => <span style={{ color: 'red' }} {...props} />;
//文档参数的表格
const TableComponent = ({ propDefinitions }) => {
  const renderPropType = propType => {
    if (propType.name === 'enum') {
      let values = propType.value.map(item => item.value);
      return values.join(' | ');
    } else {
      return propType.name;
    }
  };
  const props = propDefinitions.map(
    ({ property, propType, required, description, defaultValue }) => {
      return (
        <tr key={property} style={{ borderBottom: '1px solid #ccc' }}>
          <td>
            {property}
            {required ? <Red>*</Red> : null}
          </td>
          <td>{renderPropType(propType)}</td>
          <td>{defaultValue}</td>
          <td>{description}</td>
        </tr>
      );
    },
  );

  return (
    <table style={{ width: '100%' }}>
      <thead>
        <tr>
          <th>参数</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>{props}</tbody>
    </table>
  );
};
//文档样式
const centerDecorator = (storyFn: any) => (
  <div style={styles}>
    <h1>组件演示</h1>
    {storyFn()}
  </div>
);
addDecorator(centerDecorator);
addDecorator(
  //@ts-ignore
  withInfo({
    inline: true,
    TableComponent,
    source: true,
    header: false,
  }),
);
